<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>2017运势预测</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/buy_record.css">

    <script>
        (function(maxWidth, originSize){
            var width = document.documentElement.clientWidth;
            var Standard = originSize / (maxWidth * 1.0 / width);
            Standard = Standard > 100 ? 100 : Standard;
            document.querySelector("html").style.fontSize = Standard + "px";
        })(750, 100);
    </script>
</head>
<body>
<div class="body">
    <div class="header">
        <div class="clearfix">
            <div class="back"><a href="javascript:history.back();"></a></div>
        </div>
    </div>

    <div class="main">
        <ul class="buy_record" id="buy_record"></ul>
    </div>
</div>

<script type="text/template" id="records">
    {{ for( var i=0;i < it.length;i++){ }}
        {{ if( it[i].user['#text'] ){ }}
            <li data-all="{{=it[i].user['#text']}}|男|{{=it[i].year['#text']}}|{{=it[i].month['#text']}}|{{=it[i].day['#text']}}|{{=it[i].t_ime['#text']}}|{{=it[i].user_id['#text']}}|{{=it[i].type['#text']}}">
                <span class="name">姓名：{{=it[i].user['#text']}}</span>
                <span class="date">出生日期：{{=it[i].year['#text']}}年{{=it[i].month['#text']}}月{{=it[i].day['#text']}}日{{=it[i].t_ime['#text']}}时</span>
            </li>
        {{ }else{ }}
            <li data-all="{{=it[i].user_a['#text']}}|女|{{=it[i].year_a['#text']}}|{{=it[i].month_a['#text']}}|{{=it[i].day_a['#text']}}|{{=it[i].t_ime_a['#text']}}|{{=it[i].user_id['#text']}}|{{=it[i].type['#text']}}">
                <span class="name">姓名：{{=it[i].user['#text']}}</span>
                <span class="date">出生日期：{{=it[i].year['#text']}}年{{=it[i].month['#text']}}月{{=it[i].day['#text']}}日{{=it[i].t_ime['#text']}}时</span>
            </li>
        {{ } }}
    {{ } }}
</script>

<script type="text/javascript" src="js/lib/zepto.fastclick.doT.layer.min.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
        var type = requestPara('type');  //应用类型，传入11
        var user_id = requestPara('user_id');   //用户id
        var auth_code = requestPara('auth_code'); //用户验证的authcode字符串
        var url = 'http://newos.glassmarket.cn/zhsm/test_2017yunshi_record.php';
        //请求接口数据
        postJsonp(url);
        var msg;//获取到的信息
        $("#buy_record").on('click', 'li', function () {
            msg = $(this).attr('data-all');
            var msgArr = msg.split('|');
            var projectUrl = getProjectUrl('buy_record.html', 'result2017.html');
            console.log(msgArr);window.location = projectUrl + '?name=' + msgArr.splice(0,1)[0] +'&gender=' + msgArr.splice(0,1)[0] +'&date=' + msgArr.splice(0,4).join('|')+'&user_id='+ msgArr.splice(0,1)[0];
        });
        //获取到当前文件的项目路径，fileName:当前页面文件名
        function getProjectUrl( oldFileName, newFileName ) {
            var protocol = window.location.protocol;
            var host = window.location.host;
            var pathname = window.location.pathname;
            pathname = pathname.replace( oldFileName, '');
            var projectUrl = protocol + '//' + host + pathname + newFileName;
            return projectUrl;
        };

        function postJsonp(url) {
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'xml',
                data: {
                    "type": type,
                    "user_id": user_id,
                    "auth_code": auth_code,
                },
                success: function (data) {
                    data = xmlToJson(data);
                    console.log(data);
                    if( data.return_data.status['#text'] ==2 ){
                        _template( data.return_data.record_list.record, '#records', '#buy_record');
                        rscroll({
                            swipeDom: document.querySelector('body'),
                            swipeDirection: 'y',
                            bufferDistance: 150,
                            index: 1
                        });
                    }
                }
            });
        };
        //xml转json
        function xmlToJson(xml) {
            var obj = {};
            if (xml.nodeType == 1) {
                if (xml.attributes.length > 0) {
                    obj["@attributes"] = {};
                    for (var j = 0; j < xml.attributes.length; j++) {
                        var attribute = xml.attributes.item(j);
                        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                    }
                }
            } else if (xml.nodeType == 3) {
                obj = xml.nodeValue;
            }
            if (xml.hasChildNodes()) {
                for (var i = 0; i < xml.childNodes.length; i++) {
                    var item = xml.childNodes.item(i);
                    var nodeName = item.nodeName;
                    if (typeof(obj[nodeName]) == "undefined") {
                        obj[nodeName] = xmlToJson(item);
                    } else {
                        if (typeof(obj[nodeName].length) == "undefined") {
                            var old = obj[nodeName];
                            obj[nodeName] = [];
                            obj[nodeName].push(old);
                        }
                        obj[nodeName].push(xmlToJson(item));
                    }
                }
            }
            return obj;
        };
        //模板渲染
        function _template(data, boxGet, boxRender) {
            var renderTemplate = doT.template( $(boxGet).html() );
            $( boxRender ).html( renderTemplate(data) );
        };
        //触屏滑动页面
        function rscroll(args) {
            if( !window.Stars ){
                window.Stars = {};
            };
            /**
             * Created by Ljh on 2016/10/31.
             * args
             * args.swipeDom 大容器对象
             * args.swipeDirection 滑动类型(x or y)
             * args.bufferDistance 缓冲距离
             * args.index 控制二级分类列表里第n项行为,默认为0
             */
            Stars.rScroll = function (args) {
                if( !(this instanceof arguments.callee) ) return new arguments.callee(args);
                this.init(args);
            };
            Stars.rScroll.prototype = {
                constructor: Stars.rScroll,
                init: function (args) {
                    var that = this;
                    if( args.swipeDom && typeof args.swipeDom == 'object' ){
                        that.outBox = args.swipeDom;
                    }
                    if( !that.outBox ) return false;
                    that.innerBox = that.outBox.children && that.outBox.children[args.index] ? that.outBox.children[args.index] : '';
                    if( !that.innerBox ) return false;
                    //定义初始化的参数
                    that.settings = {
                        /*区间*/
                        maxPosition : 0,    //区间最大值
                        minPosition : 0,    //区间最小值
                        /*设置滑动的当前位置*/
                        currPosition : 0,   //当前位置
                        startPosition : 0,  //起始位置
                        endPosition : 0,    //结束位置
                        movePosition : 0,   //移动距离
                        currentPosition : 0             //*****我不明白此处不声明该属性会造成bug的原因？？？ NAN
                    };
                    that.settings.swipeDirection = args.swipeDirection ? args.swipeDirection : 'y'; //滑动方向 x or y;
                    that.settings.bufferDistance = args.bufferDistance ? args.bufferDistance : 150; //缓冲距离;

                    that._scroll(); //初始化滑动
                },
                /*相关方法*/
                //加过渡
                _addTransition: function(){
                    this.innerBox.style.transition = "all .2s ease";
                    this.innerBox.style.webkitTransition = "all .2s ease";/*兼容 老版本webkit内核浏览器*/
                },
                //去除过渡
                _removeTransition: function(){
                    this.innerBox.style.transition = "none";
                    this.innerBox.style.webkitTransition = "none";/*兼容 老版本webkit内核浏览器*/
                },
                //设置位置
                _changeTranslate: function(translate){
                    if(this.settings.swipeDirection == 'y'){
                        this.innerBox.style.transform = "translateY("+translate+"px)";
                        this.innerBox.style.webkitTransform = "translateY("+translate+"px)";
                    }else{
                        this.innerBox.style.transform = "translateX("+translate+"px)";
                        this.innerBox.style.webkitTransform = "translateX("+translate+"px)";
                    }
                },
                //滑动
                _scroll: function () {
                    var that = this;
                    //滑动的方向
                    var direction = that.settings.swipeDirection == 'y' ? true : false;
                    //外部盒子的高度（水平滑动时为宽度）
                    var outBoxSize = direction ? that.outBox.offsetHeight : that.outBox.offsetWidth;
                    //内部盒子的高度（水平滑动时为宽度）
                    var innerBoxSize = direction ? that.innerBox.offsetHeight : that.innerBox.offsetWidth;
                    ///*子容器没有父容器大的时候*/
                    if( innerBoxSize < outBoxSize ){
                        if( direction ){
                            that.innerBox.style.height = outBoxSize + 'px';
                            innerBoxSize = outBoxSize;
                        }else{
                            that.innerBox.style.width = outBoxSize + 'px';
                            innerBoxSize = outBoxSize;
                        }
                    }

                    //缓冲距离
                    var bufferDistance = that.settings.bufferDistance;

                    //区间最小值
                    that.settings.minPosition = -(innerBoxSize-outBoxSize);

                    //当触屏滑动开始时
                    that.innerBox.addEventListener( 'touchstart', function (e) {
                        //起始位置
                        that.settings.startPosition = direction ? e.touches[0].clientY : e.touches[0].clientX;
                    }, false);
                    //当触屏滑动过程中
                    that.innerBox.addEventListener( 'touchmove', function (e) {
                        e.preventDefault();
                        //终点位置
                        that.settings.endPosition = direction ? e.touches[0].clientY : e.touches[0].clientX;
                        //滑动距离
                        that.settings.movePosition = that.settings.startPosition - that.settings.endPosition;

                        //当前页面位置
                        that.settings.currentPosition = that.settings.currPosition - that.settings.movePosition;

                        //当在正常滑动区间内，移除过渡效果，使页面跟随手指实时移动
                        if( ( that.settings.currentPosition ) < ( that.settings.maxPosition + bufferDistance ) &&
                                ( that.settings.currentPosition ) > ( that.settings.minPosition - bufferDistance ) ){
                            that._removeTransition();
                            that._changeTranslate( that.settings.currentPosition );
                        }
                    }, false);
                    //当触屏滑动结束时
                    window.addEventListener( 'touchend', function () {
                        //在当前页面位置大于滑动区间最大值的时候
                        if( that.settings.currentPosition > that.settings.maxPosition ){
                            that.settings.currPosition = that.settings.maxPosition;
                            that._addTransition();
                            that._changeTranslate( that.settings.currPosition );
                        }
                        //在当前页面位置小于滑动区间最小值的时候
                        else if( that.settings.currentPosition < that.settings.minPosition ){
                            that.settings.currPosition = that.settings.minPosition;
                            that._addTransition();
                            that._changeTranslate( that.settings.currPosition );
                        }
                        //在当前页面位置位于正常区间时
                        else {
                            that.settings.currPosition = that.settings.currentPosition;
                        }

                    }, false);
                    that._reset();
                },
                //重置参数
                _reset: function () {
                    var that = this;
                    that.settings.startPosition = 0;
                    that.settings.endPosition = 0;
                    that.settings.movePosition = 0;
                }
            };
            Stars.rScroll(args);
        };
        //获取url参数
        function requestPara(paras) {
            var url = location.href;
            url = decodeURI(url);
            var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
            var paraObj = {};
            for (var i = 0; j = paraString[i]; i++) {
                paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
            }
            var returnValue = paraObj[paras.toLowerCase()];
            if (typeof(returnValue) == "undefined") {
                return "";
            } else {
                return returnValue;
            }
        };


    });
</script>


</body>
</html>